<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" >
    <link rel="shortcut icon" href="#"/>
    <link rel="stylesheet" th:href="${'/css/bootstrap.css'}"
          href="../static/css/bootstrap.css"
          type="text/css">
    <link rel="stylesheet" th:href="${'/css/jquery-ui.css'}"
          href="../static/css/jquery-ui.css"
          type="text/css"}>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet"
          th:href="${'/css/bootstrap-table.min.css'}"
          href="../static/css/bootstrap-table.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script th:src="${'/js/bootstrap-table.min.js'}" type="text/javascript"></script>
    <!-- Latest compiled and minified Locales -->
    <script th:src="${'/js/bootstrap-table-zh-CN.min.js'}" type="text/javascript"></script>
    <script th:src="${'/js/jquery.min.js'}" type="text/javascript"></script>
    <script th:src="${'/js/jquery-ui.min.js'}" type="text/javascript"></script>
    <script th:src="${'/js/bootstrap.js'}" type="text/javascript"></script><title>宏柏食堂每周菜单</title>
    <script th:src="${'/js/jquery-ui-detepicker-zh-CN.js'}" type="text/javascript"></script>

</head>
<style>
    td{
        text-align:center;
    }
    th{
        text-align:center;
    }
</style>
<body>
<table class="table  table-bordered table-striped" >
    <thead >
    <tr style="color: #ffffff" bgcolor="#00ced1">
        <th scope="col" >星期</th>
        <th scope="col" colspan="2">早餐</th>
        <th scope="col">中餐</th>
        <th scope="col">汤</th>
        <th scope="col">晚餐</th>
        <th scope="col">夜宵</th>
    </tr>
    </thead>
    <tbody th:each="canteen:${canteens}">
    <tr>
        <th scope="row" rowspan="3" th:text="${canteen.getField0173()}"></th>
        <td th:text="${canteen.getField0036()}"></td>
        <td th:text="${canteen.getField0039()}"></td>
        <td th:text="${canteen.getField0042()}"></td>
        <td rowspan="3" th:text="${canteen.getField0045()}"></td>
        <td th:text="${canteen.getField0048()}"></td>
        <td rowspan="3" th:text="${canteen.getField0051()}"></td>
    </tr>
    <tr>
        <td th:text="${canteen.getField0037()}"></td>
        <td th:text="${canteen.getField0040()}"></td>
        <td th:text="${canteen.getField0043()}"></td>
        <td th:text="${canteen.getField0049()}"></td>
    </tr>
    <tr>
        <td th:text="${canteen.getField0038()}"></td>
        <td th:text="${canteen.getField0041()}"></td>
        <td th:text="${canteen.getField0044()}"></td>
        <td th:text="${canteen.getField0050()}"></td>
    </tr>
    </tbody>
<!--    <tr th:if="${score} == null">-->
        <td>本周菜品评分</td>
        <td>
            <form action="#" th:action="@{/giveScore}" >
                <select name="score">
                    <option>10</option>
                    <option>9</option>
                    <option>8</option>
                    <option>7</option>
                    <option>6</option>
                    <option>5</option>
                    <option>4</option>
                    <option>3</option>
                    <option>2</option>
                    <option>1</option>
                </select>
                <button type="submit">打分</button>
            </form>
<!--        <td th:text="当日菜品平均分"></td>-->
<!--        <td th:text="${avgScore}"></td>-->
<!--        <td th:text="当日菜品打分人数"></td>-->
<!--        <td th:text="${scoreNum}"></td>-->
        </td>
    </tr>
<!--    <tr th:if="${score} != null">-->
<!--        <td>你对本周菜品的评分为</td>-->
<!--        <td th:text="${score}">-->
<!--        </td>-->
<!--        <td th:text="当日菜品平均分"></td>-->
<!--        <td th:text="${avgScore}"></td>-->
<!--        <td th:text="当日菜品打分人数"></td>-->
<!--        <td th:text="${scoreNum}"></td>-->
<!--    </tr>-->

</table>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("form").submit(function(e){
                alert("打分成功");
            });
        });
    });
</script>
</body>
</html>